<template>
  <view class="headers"></view>
  <view class="container">
    <view class="container-header">
      <view class="xuanzhe-header"><text>选择减脂食物</text></view>
      <view class="xuanzhe-headers"><text>查询喜欢的套餐配方</text></view>
      <view class="drinks" >
        <view class="drink-item" v-for="(drink, index) in drinks" :key="index" @click="goxiangqing(drink)">
          <image :src="drink.image" class="drink-image"></image>
          <text>{{ drink.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const drinks = ref([
  {
    image: 'https://ffa.firstui.cn/uploadfile/240723140934875.jpg',
    name: '减脂奥地利沙拉'
  },
  {
    image: 'https://ffa.firstui.cn/uploadfile/240723140934913.jpg',
    name: '减脂大西洋小龙虾'
  },
  {
    image: 'https://ffa.firstui.cn/uploadfile/240723140934767.jpg',
    name: '减脂意大利小面'
  },
  {
    image: 'https://ffa.firstui.cn/uploadfile/240723140934993.jpg',
    name: '减脂欧兰甜甜圈'
  }
]);
const goxiangqing=(drink)=>{
	uni.navigateTo({
		url:`../A/A?image=${drink.image}&name=${drink.name}`
	})
}
</script>

<style>
.xuanzhe-header {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  top: 11px;
}
.xuanzhe-headers {
  font-size: 12px;
  position: relative;
  top: 14px;
}

.container-header {
  border-radius: 10px;
  height: 540px;
  background-color: white;
  margin: -10px 15px 0px;
}

.container {
  margin-top: -70px;
  height: 562px;
  border-top-left-radius: 24px;
  background-color: white;
  border-top-right-radius: 24px;
}

.headers {
  height: 346px;
  background-image: url(https://ffa.firstui.cn/uploadfile/240723140818034.png);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.drinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.drink-item {
  width: 48%;
  border: 1px solid #999;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.drink-image {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
  height: 157px;
}
</style>
